import React, { createContext, useState, useEffect, ReactNode } from 'react';
import { ThemeType, applyTheme } from './theme';

// 主题上下文类型定义
interface ThemeContextType {
  theme: ThemeType;       // 当前主题
  toggleTheme: () => void; // 切换主题的方法
}

// 创建主题上下文，提供默认值
export const ThemeContext = createContext<ThemeContextType>({
  theme: 'light',
  toggleTheme: () => {},
});

// 主题提供者属性接口
interface ThemeProviderProps {
  children: ReactNode; // 子组件
}

// 主题提供者组件
// 负责管理主题状态并向子组件提供主题上下文
export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
  // 从本地存储中获取主题设置，如果没有则使用系统首选项
  const getInitialTheme = (): ThemeType => {
    const savedTheme = localStorage.getItem('theme') as ThemeType;
    
    // 如果本地存储有有效的主题设置，则使用它
    if (savedTheme && (savedTheme === 'light' || savedTheme === 'dark')) {
      return savedTheme;
    }
    
    // 否则检查系统首选主题
    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  };

  // 主题状态
  const [theme, setTheme] = useState<ThemeType>(getInitialTheme);

  // 在主题变化时应用主题并保存到本地存储
  // 确保每次主题变化时，CSS变量和localStorage都被更新
  useEffect(() => {
    applyTheme(theme);
    localStorage.setItem('theme', theme);
  }, [theme]);

  // 监听系统主题变化
  // 如果用户没有手动设置主题，则自动跟随系统主题变化
  useEffect(() => {
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    const handleChange = () => {
      if (!localStorage.getItem('theme')) {
        setTheme(mediaQuery.matches ? 'dark' : 'light');
      }
    };

    mediaQuery.addEventListener('change', handleChange);
    // 清理函数，组件卸载时移除事件监听
    return () => mediaQuery.removeEventListener('change', handleChange);
  }, []);

  // 切换主题函数
  // 在浅色和深色主题之间切换
  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  // 提供主题上下文给子组件
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}; 